<template>
    <el-container>
        <el-header>
            <contact-header/>
        </el-header>
        <el-container>
            <el-aside width="20%">
                <contact-aside @search-node="searchNode" @search-group="searchGroup" @tab-change="tabChangeHandle"/>
            </el-aside>
            <el-main>
                <contact-content :organization-node="organizationNode" :group-node="groupNode" :panel="currentPane"/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import ContactHeader from "./comps/ContactHeader.vue";
import ContactAside from "./comps/ContactAside.vue";
import ContactContent from "./comps/ContactContent.vue";
import {getOrganizationContacts, getUserContactsGroupData} from "../../../network/sys/contacts";
export default {
    name: "ContactsMain",
    components: {ContactContent, ContactAside, ContactHeader},
    data(){
        return{
            organizationNode: {id:null,name:null,type:null},
            groupNode: {id:null,groupName:null},
            currentPane: '0'
        }
    },
    methods: {
        tabChangeHandle(currentPane){
            this.currentPane = currentPane;
        },
        searchGroup(group){
            this.groupNode = group;
        },
        searchNode(node){
            this.organizationNode = node;
            // console.log('搜索内容为：',node)
        },
        loadOrganizationContacts(){
            getOrganizationContacts().then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        let map = vo.data;
                        this.$store.commit('setOrganizationContacts',map.organizationContacts);
                        this.$store.commit('setOrganization',map.organization);
                    },
                    log: '加载组织通讯录页面数据...'
                })
            })
        },
        loadUserGroupContacts(){
            getUserContactsGroupData().then(vo=>{
                this.$response.handle({
                    data: vo,
                    successFn: ()=>{
                        this.$store.commit('setUserContactsGroup',vo.data.userContactsGroup);
                        this.$store.commit('setUserGroupContacts',vo.data.userGroupContacts);
                    },
                    log: '加载用户通讯录页面...'
                })
            })
        },
        init(){
            this.loadOrganizationContacts();
        }
    },
    created() {
        this.init();
    },
    watch:{
        currentPane(){
            if(this.currentPane === '1' && this.$store.state.userGroupContacts.length===0){
                this.loadUserGroupContacts();
            }
        }
    }
}
</script>

<style scoped>
*{
    /*border: 1px solid red;*/
    font-size: 14px;
}
.el-container{
    min-height: 99%;
}
.el-header{
    background: rgb(249,249,249);
    border-bottom: 1px solid lightgray;
    height:52px;
}
.el-aside{
    background: white;
}
.el-main{
    background: white;
    padding: 0;
}
</style>